<template>
	<view>
		<view class="grace-left-padding-wrap">
			<label class="grace-list" @click="openImage()">
				<text class="grace-list-text">头像</text>
				<view>
					<image :src="(userData.avatarImg==null||userData.avatarImg=='')?'../../../static/user.png':serverUrl+userData.avatarImg" class="grace-list-imgs-l" mode="widthFix"></image>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list" id="nickName" :data-value="userData.nickName" @click="openInput">
				<text class="grace-list-text">昵称</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.nickName==null?'':userData.nickName}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list" id="telephone" :data-value="userData.telephone" @click="openInput">
				<text class="grace-list-text">手机号</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.telephone==null?'':userData.telephone}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<picker mode="selector" :range="genderList" @change="bindGenderChange">
			<label class="grace-list">
				<text class="grace-list-text">性别</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.gender==0?'未知':(userData.gender==1?'女':(userData.gender==2?'男':''))}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			</picker>
			<label class="grace-list" id="email" :data-value="userData.email" @click="openInput">
				<text class="grace-list-text">邮箱</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.email==null?'':userData.email}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list" id="address" :data-value="userData.address" @click="openTextarea">
				<text class="grace-list-text">联系地址</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.address==null?'':userData.address}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<picker mode="selector" :range="educationList" @change="bindEducationChange">
			<label class="grace-list">
				<text class="grace-list-text">学历</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.education==null?'':userData.education}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			</picker>
			<label class="grace-list" id="favouriteSubject" :data-value="userData.favouriteSubject" @click="openTextarea">
				<text class="grace-list-text">感兴趣的主题</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.favouriteSubject==null?'':userData.favouriteSubject}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
			<label class="grace-list" id="signature" :data-value="userData.signature" @click="openTextarea">
				<text class="grace-list-text">个性签名</text>
				<view>
					<text class="grace-list-text grace-list-mr">{{userData.signature==null?'':userData.signature}}</text>
					<text class="grace-list-imgs-arrow grace-iconfont icon-arrow-right"></text>
				</view>
			</label>
		</view>

		<view style="width:100%; margin-top:30upx;">
			<button style="width:92%; color: #fff; background:#FF3333; border:0;" @click="toLogout">退出登录</button>
		</view>
		<view style="width:100%; height:60upx;"></view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
		data() {
			return {
				serverUrl: this.serverUrl,
				staticUrl: this.staticUrl,
				userData: {},
				genderList: ['未知', '女', '男'],
				educationList: ['小学', '初中', '高中', '专科', '本科', '硕士', '博士', '其他'],

			}
		},
		onLoad(){
			// this.findUser();
		},
		onShow() {
			this.findUser();
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			bindGenderChange: function(e) {
				//console.log(e.target.value);
				this.saveUser('gender',e.target.value);
			},
			bindEducationChange: function(e) {
				//console.log(educationList[e.target.value]);
				this.saveUser('education',this.educationList[e.target.value]);
			},
			openInput(e){
				var cont = "";
				if(e.currentTarget.dataset.value!=undefined&&e.currentTarget.dataset.value!=null){
					cont = e.currentTarget.dataset.value;
				}
				uni.navigateTo({
					url:"../edit-input/edit-input?paraName="+e.currentTarget.id+"&content="+cont
				})
			},
			openTextarea(e){
				var cont = "";
				if(e.currentTarget.dataset.value!=undefined&&e.currentTarget.dataset.value!=null){
					cont = e.currentTarget.dataset.value;
				}				
				uni.navigateTo({
					url:"../edit-textarea/edit-textarea?paraName="+e.currentTarget.id+"&content="+cont
				})
			},
			openImage(e){
				uni.navigateTo({
					url:"../edit-image/edit-image"
				})
			},
			toLogout(){
				this.logout();
				uni.removeStorageSync('appKey');
				uni.switchTab({
					url: "/pages/tab-bar/my/my"
				})
			},
			findUser(){
				uni.request({
					url: this.serverUrl + 'user-api/findUser',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						username: this.userInfo.username
					},
					success: (r) => {
						//console.log(r);
						if (r.data.code == "000000") {
							this.login(r.data.data);
							this.userData = r.data.data;
						} else {
							uni.showToast({
								title: r.errMsg
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})				
			},			
			saveUser(sname,svalue){
				var data ={
					"username":this.userInfo.username
				}
				data[sname]=svalue;
				uni.request({
					url: this.serverUrl + 'user-api/editUser',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: data,
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							this.login(r.data.data);
							this.userData = r.data.data;
						} else {
							uni.showToast({
								title: r.errMsg
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F6F7F8;
	}

	.del-btn {
		background-color: #f67371;
		border-radius: 50%;
		width: 45upx;
		height: 45upx;
		position: absolute;
		top: -12upx;
		right: -12upx;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.del-btn .baicha {
		display: inline-block;
		width: 20upx;
		height: 5upx;
		background: #fff;
		line-height: 0;
		font-size: 0;
		vertical-align: middle;
		-webkit-transform: rotate(45deg);
	}

	.del-btn .baicha:after {
		content: '/';
		display: block;
		width: 20upx;
		height: 5upx;
		background: #fff;
		-webkit-transform: rotate(-90deg);
	}
	.uni-popup{
		background-color:#F0F0F0;
	}
	.uni-popup-middle{
		height: 40upx;
	}
</style>
